<script lang="ts" setup name="B17Props">
import { defineProps, withDefaults } from "vue";

//const props = defineProps(["msg", "list"]);
//console.log(props.msg);

//defineProps(["msg", "list"]);

// 限定类型
//defineProps<{ list: PersonList; msg: string }>();
//const props = defineProps<{ list: PersonList; msg: string }>();
//console.log(props);

// 可选 + 默认值
withDefaults(defineProps<{ list?: PersonList; msg?: string }>(), {
  msg: "Hello，世界",
  list: () => [], // 数组要写成函数的返回值
});
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">Props</h1>
  <div class="my-3">
    <div>msg: {{ msg }}</div>
    <ul>
      <li v-for="p in list" :key="p.id">{{ p.name }} - {{ p.age }}</li>
    </ul>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click=""></button>
  </div>
</template>
